<template>
	<view class="content">
		<!-- 轮播 -->
		<swiper-image :swiperList="swiperlist"></swiper-image>
		<!--2层 -->
		<view class="second_content">
			<view class="one">
				<view class="jiu">
					<image class="jiu_img" src="../../static/images/index_second/02.jpg" mode="widthFix"></image>
				</view>
				<image class="bg" src="../../static/images/index_second/01.jpg" mode="widthFix"></image>
				<text class="text">第2件0元</text>
			</view>
			<view class="two">
				<view class="t_img">
					<image class="img" src="../../static/images/index_second/03.jpg" mode="widthFix"></image>

					<image class="img" src="../../static/images/index_second/04.jpg" mode="widthFix"></image>
				</view>
				<image class="bg" src="../../static/images/index_second/01.gif" mode="widthFix"></image>
			</view>
			<view class="three">
				<view class="jiu">
					<image class="jiu_img" src="../../static/images/index_second/05.jpg" mode="widthFix"></image>
				</view>
				<image class="bg" src="../../static/images/index_second/06.jpg" mode="widthFix"></image>
				<text class="text">地道年货</text>
			</view>
		</view>
		<!-- tab -->
		<view class="tab_list">
			<navigator url="/pages/goodsList/index" open-type="switchTab" class="item" v-for="(item,index) in tabList"
				:key="item.url">
				<image :src="item.url" mode="widthFix" class="img"></image>
				<text>{{item.text}}</text>
			</navigator>
		</view>
		<!-- 秒杀 -->
		<view class="miaosha">
			<view class="top">
				<view class="t_left">
					<text>京东秒杀</text>
					<view class="dch">
						16
						<image class="img" src="/static/images/miaosha/01.png" mode="widthFix"></image>
					</view>
				</view>
				<navigator url="../goodsList/index" open-type="switchTab" class="t_right">
					更多秒杀<image src="/static/images/miaosha/right.png" mode="widthFix"></image>
				</navigator>
			</view>
			<view class="goods">
				<navigator url="../goodsList/index" open-type="switchTab" class="good_item" v-for="item in mslist" :key="item.id">
					<image :src="item.url" mode="widthFix"></image>
					<text>¥{{item.price}}</text>
				</navigator>
			</view>
		</view>
		
		<!-- 推荐 -->
		<view class="recommended">
			<view class="recommendedItem" v-for="item in recommendedList" :key="item.goodimg">
				<image class="goodimg" :src="item.goodimg" mode="widthFix"></image>
				<view class="des_wrap">
					<view class="des">
						<image class="desicon" v-if="item.desicon.isshow" :src="item.desicon.icon" mode="widthFix"></image>
						<image v-if="item.csicon.isshow" :src="item.csicon.icon" mode="widthFix"></image>
						<text class="text">{{item.des}}</text>
					</view>
					<view class="price">
						¥<text class="num">{{item.price}}</text>
					</view>
					<view class="comments">
						<navigator class="commentsNum">
							{{item.commentsTotal}}条评论
						</navigator>
						<navigator class="same">
							看相似
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import swiperImage from '@/components/index/swiper-image.vue'
	export default {
		components: {
			swiperImage
		},
		data() {
			return {
				title: 'Hello',
				swiperlist: [{
						imgurl: '/static/images/swiper/01.jpg',
						id: 1
					},
					{
						imgurl: '/static/images/swiper/02.jpg',
						id: 2
					},
					{
						imgurl: '/static/images/swiper/03.jpg',
						id: 3
					}
				],
				tabList: [
					{url: '/static/images/tab/01.jpg',
						text: '京东超市'
					},
					{
						url: '/static/images/tab/02.jpg',
						text: '数码电器'
					},
					{
						url: '/static/images/tab/03.jpg',
						text: '京东服饰'
					},
					{
						url: '/static/images/tab/04.jpg',
						text: '京东生鲜'
					},
					{
						url: '/static/images/tab/05.jpg',
						text: '京东到家'
					},
					{
						url: '/static/images/tab/06.jpg',
						text: '充值缴费'
					},
					{
						url: '/static/images/tab/07.jpg',
						text: '物流查询'
					},
					{
						url: '/static/images/tab/08.jpg',
						text: '领券'
					},
					{
						url: '/static/images/tab/09.jpg',
						text: '领金贴'
					},
					{
						url: '/static/images/tab/10.jpg',
						text: 'PLUS会员'
					}
				],
				mslist:[
					{url:'/static/images/miaosha/02.jpg',price:12,id:1},
					{url:'/static/images/miaosha/03.jpg',price:96,id:2},
					{url:'/static/images/miaosha/04.jpg',price:24,id:3},
					{url:'/static/images/miaosha/05.jpg',price:89,id:4},
					{url:'/static/images/miaosha/06.jpg',price:6.9,id:5},
					{url:'/static/images/miaosha/07.jpg',price:20.9,id:6},
					
				],
				recommendedList:[
					{
						goodimg:'/static/images/index_goods/01.jpg',
						des:'潘婷乳液洗护套装洗500g*2+护400g送洗230g （洗发水洗发膏）男士女士通用 新旧随机发',
						desicon:{
							isshow:true,
							icon:'/static/images/index_goods/01.png'
						},
						csicon:{
							isshow:false,
							icon:'/static/images/index_goods/02.png'
						},
						price:179.90,
						commentsTotal:'1万+'
					},
					{
						goodimg:'/static/images/index_goods/02.jpg',
						des:'思米达&nbsp;粘捕式灭蚊灯298LED（单管） 商用宾馆酒店灭蝇器灭蚊灯家用粘捕式驱蚊蝇灯餐厅杀虫诱蝇神器',
						desicon:{
							isshow:true,
							icon:'/static/images/index_goods/01.png'
						},
						csicon:{
							isshow:false,
							icon:'/static/images/index_goods/02.png'
						},
						zyicon:{
							isshow:true,
							icon:'/static/images/index_goods/02.png'
						},
						price:99.00,
						commentsTotal:'1万+'
					},
					{
						goodimg:'/static/images/index_goods/03.jpg',
						des:'斑布(BABO) Classic系列  高端本色纸有芯卷纸 4层加厚180g卫生卷纸*27卷 母婴可用 竹纤维无漂白',
						desicon:{
							isshow:true,
							icon:'/static/images/index_goods/01.png'
						},
						csicon:{
							isshow:false,
							icon:'/static/images/index_goods/02.png'
						},
						
						price:99.00,
						commentsTotal:'1万+'
					},
					{
						goodimg:'/static/images/index_goods/04.jpg',
						des:'思米达&nbsp;粘捕式灭蚊灯298LED（单管） 商用宾馆酒店灭蝇器灭蚊灯家用粘捕式驱蚊蝇灯餐厅杀虫诱蝇神器',
						desicon:{
							isshow:true,
							icon:'/static/images/index_goods/01.png'
						},
						csicon:{
							isshow:false,
							icon:'/static/images/index_goods/02.png'
						},
						
						price:99.00,
						commentsTotal:'1万+'
					},
					
				]

			}
		},
		onLoad() {
			console.log("onload");
		},
		directives:{
			big(){
				console.log('@@@',this);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f6f6;
	}

	.swiper {
		width: 100%;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.second_content {
		display: flex;
		// height: 200rpx;
		justify-content: center;
		margin-bottom: 20upx;
		box-sizing: border-box;

		.one,
		.three {
			flex: 1;
			position: relative;
			height: auto;

			.jiu {
				position: absolute;
				width: 66%;
				left: 20px;
				top: 30px;

				.jiu_img {
					width: 100%;
				}

			}

			.text {
				display: block;
				position: absolute;
				bottom: 18px;
				left: 25px;
				font-size: 13px;
				color: #fff;
			}

			.bg {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
		}

		.two {
			flex: 2;
			position: relative;

			.t_img {
				position: absolute;
				padding: 20px;
				box-sizing: border-box;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				column-count: 2;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.bg {
				width: 100%;
				height: 132px !important;
			}

		}

		.three {
			flex: 1;

			.jiu {
				.jiu_img {
					left: -3px;
				}
			}
		}
	}

	.tab_list {
		margin: 10px;
		column-count: 5;
		column-gap: 10rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20rpx;

			.img {
				width: 60%;
				height: 60%;
				margin-bottom: 10rpx;
			}

			text {
				font-size: 26rpx;
				color: #666;
			}
		}
	}

	.haha {
		font-size: 50px;
	}

	.mama {
		.mm {
			width: 100%;
		}
	}

	.miaosha {
		width: 95%;
		margin: 0 auto;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 10px;
		box-sizing: border-box;

		.top {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;

			.t_left {
				flex: 1;
				display: flex;
				justify-content: space-between;
				.dch {
					display: flex;
					width: 60%;
					.img {
						width: 50rpx;
					}
				}
			}

			.t_right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #f23030;

				image {
					width: 28rpx;
					margin-left: 6rpx;
				}
			}
		}
		
		.goods{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.good_item{
				flex: 1;
				padding: 5rpx;
				box-sizing: border-box;
				text-align: center;
				image{
					width: 100%;
				}
				text{
					color: #f2270c;
					font-size: 26rpx;
				}
			}
		}
	}
	
	.recommended{
		margin: 20rpx;
		column-count: 2;
		column-gap: 20rpx;
		.recommendedItem{
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			.goodimg{
				width: 100%;
			}
			.des_wrap{
				padding: 16rpx;
				box-sizing: border-box;
				.des{
					font-size: 30rpx;
					line-height: 30rpx;
					position: relative;
					.desicon{
						position: absolute;
						left: 0;
						top: 4px;
						width: 38px;
					}
					.text{
						text-indent: 40px;
						text-overflow: ellipsis;
						display: -webkit-box;
					   -webkit-box-orient: vertical;
					   -webkit-line-clamp: 2; 
					   overflow: hidden;
						font-size: 16px;
						line-height: 24px;
						color: #434343;
					}
				}
				.price{
					color: #ff4142;
					margin-top: 16rpx;
					.num{
						font-size: 20px;
					}
				}
				.comments{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;
					.commentsNum{
						color: #999;
					}
					.same{
						background-color: #f2f2f2;;
						border-radius: 10px;
						padding: 5px 8px;
						font-size: 12px;
					}
				}
			}
			
		}
	}
</style>
